<template>
  <div>
    <div>
      <!-- 这个内部数据,是要依靠客户的id进行查询获得 -->
      <!-- 标题 -->
      <div>询价单管理</div>
      <!-- <button @click="test">测试</button> -->
      <!-- 查询条件 -->
      <div>
        <el-form :model="search" label-width="auto" style="width: 100%">
          <el-row>
            <el-col :span="5">
              <el-form-item label="联系人">
                <el-select v-model="search.saleId" placeholder="请选择联系人" size="large" style="width: 240px">
                  <el-option v-for="(item, index) in emploee" :key="index" :label="item.realName" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="联系方式">
                <el-input v-model="search.mobile" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态">
                <el-select v-model="search.status" placeholder="请选择状态" size="large" style="width: 240px">
                  <el-option v-for="(item, index) in statu" :key="index" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" round @click="select">查询</el-button>
              <el-button type="primary" round @click="clear">重置</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="21">
              <el-button type="primary" round @click="add()" style="margin-left:100% ;">添加询价单</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 内容展示 -->
      <div>
        <el-table :data="data" stripe style="width: 100%">
          <el-table-column prop="type" label="类型" width="100" header-align="center" align="center">
            <template #default=scope>
              <span v-if="scope.row.type == 1">询价单</span>
              <span v-else>咨询单</span>
            </template>
          </el-table-column>
          <el-table-column prop="contacts" label="联系人" width="100" header-align="center" align="center" />
          <el-table-column prop="phone" label="联系方式" width="120" header-align="center" align="center" />
          <el-table-column prop="status" label="状态" width="100" header-align="center" align="center">
            <template #default="scope">
              <span v-if="scope.row.status == 1">未报价</span>
              <span v-if="scope.row.status == 2">已报价</span>
              <span v-if="scope.row.status == 3">确定签约</span>
              <span v-if="scope.row.status == 4">拒绝合作</span>
            </template>
          </el-table-column>
          <el-table-column prop="yunfei" label="运费" width="100" header-align="center" align="center" />
          <el-table-column prop="total" label="总价" width="100" header-align="center" align="center" />
          <el-table-column label="操作" header-align="center">
            <template #default="scope">
              <span v-if="scope.row.status != 1"><el-button style="margin:0 4px" type="primary" :icon="Edit"
                  title="产品报价" @click="quote(scope.row)">产品报价</el-button></span>
              <span v-if="scope.row.status == 1 || 2"><el-button style="margin:0 4px" type="primary" :icon="Edit"
                  title="修改订单" @click="updata(scope.row)">修改订单</el-button></span>
              <span v-if="scope.row.status == 2"> <el-button style="margin:0 4px" type="primary" :icon="Edit"
                  title="确定签约" @click="yes(scope.row)">确定签约</el-button></span>
              <span v-if="scope.row.status == 2"> <el-button style="margin:0 4px" type="primary" :icon="Edit"
                  title="拒绝签约" @click="no(scope.row)">拒绝签约</el-button></span>

              <!-- 修改对话框 -->
              <el-dialog v-model="dialogVisible" title="修改订单描述" width="700">
                <!-- 修改内容 -->
                <span style="font-size: 18px;">描述:</span>
                <el-input v-model="scope.row.note" :rows="3" type="textarea" placeholder="客户修改订单内容" />
                <!-- 按钮 -->
                <template #footer>
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="sure(scope.row)">确定</el-button>
                </template>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 页码 -->
      <div>
        <el-pagination background layout="total, prev, pager, next, sizes" :total="total" :page-size="search.pageSize"
          :current-page="search.page" :page-sizes="[1, 4, 8, 10, 20]" @size-change="chgSize"
          @current-change="chgPage" />
      </div>


    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from "vue-router";
import { Edit } from "@element-plus/icons-vue";
import { getCustomerInquiryInfo } from '@/api/customer.ts'
import { getEmployeeInfoByType } from '@/api/departmentApi.ts'


//定义路由跳转对象以及路由跳转接收数据
const router = useRouter();
const route = useRoute();

//页面记载时,进行数据查询
onMounted(() => {
  initData();
})

//查询
function select() {
  initData();
}

//初始化数据--也是查询功能
async function initData() {
  // debugger
  const res = await getCustomerInquiryInfo(search.value)
  //查询到数据总数后赋值给total
  total.value = res.total
  data.value = res.data.data
  // console.log(res)

  const aaa = await getEmployeeInfoByType(2)
  emploee.value = aaa.data
  // console.log(emploee.value)

}
function test() { 
  // console.log(search.value.saleId)
}
//查找销售
const emploee = ref([])
//重置查询条件
function clear() {
  search.value = {
    pageNum: 1,
    pageSize: 4,
    contacts: "",
    phone: "",
    status: "",
  }
  initData()
}

//对话框的展示
const dialogVisible = ref(false)

//按钮功能
function quote(row) {
  // alert("产品报价");
  router.push({ name: "QuoteDetails", query: row })
}
function updata() {
  console.log("修改订单")
  dialogVisible.value = true;

}
function sure(row) {
  console.log("调用接口")
  console.log(row)
  dialogVisible.value = false
}
function yes() {
  alert("确定签约");
}
function no() {
  alert("拒绝合作");
}

//分页部分
//总数据条数
//死值后续修改
const total = ref()

//页码发生变化
function chgPage(page) {
  console.log(page)
  search.value.page = page;
  initData();
}

//每页显示条数发生变化
function chgSize(size) {
  console.log(size)
  search.value.pageSize = size;
  // console.log(search.value);
  initData();
}

//查询条件
const search = ref({
  pageNum: 1,
  pageSize: 4,
  saleId: "",
  mobile: "",
  status: "",
});
//接收数据对象
const data = ref([]);
//根据状态查询
const statu = [{
  value: '1',
  label: '未报价',
},{
  value: '2',
  label: '已报价',
  }, {
    value: '3',
    label: '确定签约',
  }, {
    value: '4',
    label: '拒绝合作',
  },]



//添加询价单
function add() {
  // alert("添加,跳转添加页面");
  router.push({ name: "InquiryAdd" })

}



</script>

<style scoped>
.el-pagination {
  border: 1px solid #dcdfe5;
  margin-top: 50px;
  padding-left: 300px;
}

.el-col {
  margin-right: 20px;
}

.el-form {
  margin: 15px;
}
</style>
